<template>
  <div>
    <myinput
      v-model='todo'
      @submit='submit'
    />
    <mylist
      :data='todoAry'
      @del='del'
    >
      <template #default='data'>
        <h1>{{data.item.text}}</h1>
        <mybutton @click='del(data.item)'>自定义删除按钮</mybutton>
      </template>
    </mylist>
  </div>
</template>
<script>
// @ is an alias to /src
import myinput from "d1/components/todo/input";
import mylist from "./list";
import mybutton from "./button";
export default {
  name: "XXX",
  data() {
    return {
      todo: "",
      todoAry: [{ id: Math.random(), text: "ceshi" }],
    };
  },
  methods: {
    submit() {
      console.log("submit");
      this.todoAry.unshift({
        id: Math.random(),
        text: this.todo,
      });
      this.todo = "";
    },
    del(item) {
      // console.log(item);
      this.todoAry = this.todoAry.filter((val) => val.id !== item.id);
    },
  },
  components: { myinput, mylist, mybutton },
};
</script>
<style lang="less">
</style>